<template>
  <div id="user-login-page">
    <h1>触图万象 手机号登录</h1>
    <div class="title">企业级智能协同图库</div>
    <a-form :model="formState" name="normal_login" class="login-form" @finish="submitForm">
      <a-form-item name="phone" :rules="[{ required: true, message: '请输入手机号!' }]">
        <a-input
          style="width: 40vw"
          v-model:value="formState.phone"
          allow-clear
          placeholder="默认手机号：zhangsan"
        >
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码！' }]">
        <a-space align="center">
          <a-input v-model:value="formState.code" allow-clear style="width: 20vw">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input>
          <a-button type="primary" :disabled="formattedTime != '00'" @click="getCode">
            {{ formattedTime === '00' ? '获取验证码' : `${formattedTime}秒后重新获取` }}
          </a-button>
        </a-space>
      </a-form-item>

      <a-form-item>
        <a style="width: 40vw" @click="router.back()">返回登录页</a>
      </a-form-item>

      <a-form-item>
        <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { computed, onUnmounted, reactive, ref } from 'vue'
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
import { sendCodeUsingPost, userLoginBySmsUsingPost } from '@/api/userController.ts'
import { useUserStore } from '@/stores/user.ts'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'

const formState = reactive<API.UserLoginBySmsRequest>({
  phone: '18883799646',
  code: '',
})

const router = useRouter()
const userStore = useUserStore()
const submitForm = async () => {
  const res = await userLoginBySmsUsingPost(formState)
  if (res.data.code === 0 && res.data.data) {
    //   获取用户信息
    await userStore.fetchUserInfo()

    userStore.setToken(res.data.data)

    //   跳转到首页
    await router.replace({
      path: '/',
    })

    //   刷新页面
    router.go(0)

    message.success('登录成功！')
  }
}

// 获取验证码
// 设置倒计时
const getCode = async () => {
  const res = await sendCodeUsingPost({ phone: formState.phone })
  if (res.data.code === 0) {
    message.success('验证码已发送！')
    startCountdown()
  }
}

const disabled = computed(() => {
  return !(formState.phone && formState.code)
})

const timeLeft = ref(0)
const timer = ref()

const formattedTime = computed(() => {
  return timeLeft.value.toString().padStart(2, '0')
})

const startCountdown = () => {
  timeLeft.value = 60
  timer.value = setInterval(() => {
    if (timeLeft.value > 0) {
      timeLeft.value--
    } else {
      clearInterval(timer.value)
    }
  }, 1000)
}

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>
<style scoped lang="scss">
.login-form {
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 29px;
}

.title {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: #bbb;
}

.login-form-button {
  width: 100%;
}
</style>
